<template>
  <div>
    <h1>欢迎来到我的世界，你好{{ $store.state.username }}</h1>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px; height: 400px"></div>
  </div>
</template>

<script>
import { reqArticleCount } from '@/api'
// import echarts from 'echarts' // 不行
import * as echarts from 'echarts' // 可以
// const echarts = require('echarts') // 可以，但不推荐
export default {
  methods: {
    initEchart({ xData, yData }) {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts)
      const myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: 'ECharts 入门示例',
          show: true,
          textStyle: {
            fontSize: '20px',
            color: 'red',
          },
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          data: xData,
        },
        yAxis: {},
        series: [
          {
            name: '文章篇数',
            type: 'bar',
            data: yData,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
  async mounted() {
    let data = await reqArticleCount()
    // 初始化echarts图表
    let xData = data.map((item) => item.cate_name)
    let yData = data.map((item) => item.total)
    this.$nextTick(() => {
      this.initEchart({ xData, yData })
    })
  },
}
</script>

<style lang="scss" scoped></style>
